<template>
    <div class="fw-bottom-banner-com">
        <div class="cover-text-box">
            <div
                v-if="title"
                class="cover-title">
                {{ title }}
            </div>
            <div
                v-if="text"
                class="cover-text">
                {{ text }}
            </div>
        </div>

        <img
            :src="url"
            class="cover-img" />
    </div>
</template>

<script setup lang="ts">
    const props = withDefaults(
        defineProps<{
            url: string;
            title?: string;
            text?: string;
        }>(),
        {}
    );
</script>

<style scoped lang="scss">
    // 导入响应式 mixins
    @use '@/styles/mixins/responsive' as *;

    .fw-bottom-banner-com {
        position: relative;
        .cover-text-box {
            position: absolute;
            bottom: 20%;
            left: 10%;
            width: pxToRem(713);
            color: rgba(0, 0, 0, 0.9);
            text-align: initial;
            padding: 0 20px;
            box-sizing: border-box;
            .cover-title {
                font-family: 'SFProDisplayBlack';

                font-size: pxToRem(50);
                font-weight: 900;
                color: #000000;
                margin-bottom: pxToRem(30);
            }
            .cover-text {
                font-family: 'SFProDisplayLight';
                font-size: pxToRem(30);
                font-weight: 500;
            }
        }
        .cover-img {
            width: 100%;
            display: block;
        }
    }

    // 响应式设计 - 大屏幕 (1440px及以下)
    @include desktop-small {
    }

    // 响应式设计 - 中等屏幕 (1024px及以下)
    @include tablet {
        .fw-bottom-banner-com {
            .cover-text-box {
                width: 60%;
                .cover-title {
                    font-size: pxToRem(40);
                }
                .cover-text {
                    font-size: pxToRem(22);
                }
            }
        }
    }

    // 响应式设计 - 平板端 (768px及以下)
    @include mobile {
        .fw-bottom-banner-com {
            .cover-text-box {
                // width: 90%;
                left: pxToRem75(30);
                bottom: pxToRem75(30);
                .cover-title {
                    font-size: pxToRem75(30);
                    margin-bottom: pxToRem75(20);
                }
                .cover-text {
                    font-size: pxToRem75(18);
                }
            }
        }
    }
</style>
